<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>socket的客户端</title>
    <!-- 引入socket客户端js -->
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/socket.io/4.4.1/socket.io.js" type="application/javascript"></script>

</head>
<body>

    <h1>我是socket客户端</h1>

    <input type="text" id="name" placeholder="用户名">
    <button id="login">用户登录</button>
    <button id="bt1">我是客户端的按钮</button>
    <button id="join"> 加入周末不上课的房间</button>
    <button id="send2room">发消息到yep房间</button>

    <div> 
      发送给谁 <input type="text" id="who" placeholder="发给谁"> <br />
      内容  <input type="text" id="msg" placeholder="消息内容"> <br /> 
        <button id="send"> 发送</button>
    </div>



    <script>

            const $ = function(slt){
                return document.querySelector(slt)
            }

            $("#login").addEventListener('click',()=>{
                const uname = $("#name").value;
                const sc = io('http://127.0.0.1:5000?uname='+uname); // 与socket服务器建立链接
            
                //  sc.on(事件名, 回调函数)
                //  connect 内置事件 与服务建立通讯成功
                sc.on('connect', ()=>{
                    console.log('通讯成功')
                })

                $('#bt1').addEventListener('click',()=>{
                    //   C ->  S
                    // 客户端通过 emit(自定义的事件名,传递的参数)
                    sc.emit('kfc', 123456)
                })

                sc.on('abc', res=>{
                    console.log('我是客户端接受到的消息',res)
                })

                // 点击按钮之后 用户加入到房间
                $("#join").addEventListener('click',()=>{
                    sc.emit('ilikeweekend');
                })

                $("#send2room").addEventListener('click',()=>{
                    sc.emit('send','我是消息内容')
                })

                sc.on('msg',res=>console.log('来消息啦！！'+res))

                $("#send").addEventListener("click",()=>{
                    const who = $("#who").value;
                    const msg = $("#msg").value;
                    sc.emit('newmsg',{
                        who,
                        msg,
                        from:uname
                    })
                })

                sc.on('p2p',res=>{
                    console.log(res)
                })
            
            })
          

       
            
    </script>
    
</body>
</html>